<template>
	    <view class="cart">
			<template v-if="isCanPay == 0">
				<view><image class="code" src="/static/image/weixin_code.jpg" style="margin: 0 auto;"></image></view>
			</template>
			<template v-if="isCanPay == 1">
				<view class="content">
				    <view class="list" v-for="item in cartList" :key='item.food_id'>
				        <view class="left">
				          <!--  <checkbox-group @change="checkboxChange($event,item.id)">
				                <checkbox :value="item.id" :checked="item.isChecked" />
				            </checkbox-group> -->
				            <image :src="item.food_img" class="img"></image>
				        </view>
				        <view class="center">
				            <view class="name">
				                {{item.food_name}}
				            </view>
				            <!-- <view class="size">
				                尺寸：{{item.size}}
				            </view> -->
				            <view class="count">
				                数量：x{{item.selected_num}}
				            </view>
				        </view>
				        <view class="right">
				            <view class="price">
				                ￥{{item.total_price}}元
				            </view>
				            <!-- <view class="update-count">
				                <view class="reduce" @tap="editNum(item.id,-1)">
				                    -
				                </view>
				                <view class="cart-count">
				                    {{item.count}}
				                </view>
				                <view class="add" @tap="editNum(item.id,1)">
				                    +
				                </view>
				            </view> -->
				        </view>
				    </view>
				</view>
					
				<!-- 底部导航栏 -->
				<view class="tabbar">
				    <!-- <view class="all">
				        <checkbox-group @change="checkboxChangeAll">
				            <checkbox :checked="isAllChecked" />全选
				        </checkbox-group>
				    </view> -->
				    <view class="totalPrice">
				        总价:￥{{order.order_price}}元
				    </view>
				    <view class="submitOrder" @click="pay()">
				        付款
				    </view>
				</view>
			</template>
	        
	    </view>
	
</template>

<script>
	import check from '@/common/check.js'
	export default {
	        data() {
	            return {
					cartList: [],   // 订单菜品列表
					order: {},  // 订单详情
					isCanPay: 0,
					desk_id: 1
	            }
	        },
			onLoad(args) {
				check.checkIsCanPay(data => {
					this.isCanPay = data
					if (this.isCanPay == 1) {
						if (args.desk_id) {
							this.desk_id = args.desk_id
						}
						uni.setNavigationBarTitle({
							'title': this.desk_id +'号桌'
						})
					}
				})
				this.cartList = getApp().globalData.orderData.food_list.data;
				this.order = getApp().globalData.orderData;
			},
	        methods: {
				pay() {
					console.log('foodList--',getApp().globalData.orderData)
					// return;
					uni.showLoading({
						'title': '支付中'
					});
					uni.request({
						url: 'https://restaurant.lgdweb.com/api/order/pay/',
						data: getApp().globalData.orderData,
						method: 'post',
						success: res => {
							if (res.data.status == 0) {
								uni.showToast({
									'title': '支付成功',
									'success': () => {
										uni.navigateTo({
											url: '/pages/order/order?status=1'
										})
									}
								})
							} else {
								uni.showToast({
									'title': '支付失败',
									'icon': 'error'
								})
							}
						},
						fail: err => {
							console.log(err)
						}
					});
				}
	        }
	    }
</script>

<style lang="scss" scoped>
    page {
        background: #f1e8e7;
    }
    .content {
        width: 670rpx;
        margin: 0 auto 180rpx;
    }

    // 居中显示
    @mixin textCenter {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .list {
        width: 672rpx;
        height: 208rpx;
        background: #f9f9f9;
        box-shadow: 0 8rpx 16rpx 0 rgba(83, 66, 49, 0.08);
        border-radius: 24rpx;
        margin-top: 32rpx;
        display: flex;
        justify-content: space-around;
        align-items: center;

        .left {
            display: flex;

            .img {
                width: 136rpx;
                height: 136rpx;
                margin-left: 10rpx;
                border-radius: 8%;
            }
        }

        .center {
            width: 170rpx;

            .name {
                font-size: 0.9rem;
                color: #3E3E3E;
                white-space: nowrap;
                text-overflow: ellipsis;
                overflow: hidden;
            }

            .size,
            .count {
				margin-top: 10rpx;
                font-size: 22rpx;
                color: #8D8D8D;
            }
        }

        .right {
            .price {
                // margin-top: 40rpx;
                font-size: 1rem;
                margin-left: 40rpx;
            }

            // 加减数量
            .update-count {
                margin-top: 40rpx;
                display: flex;

                .reduce,
                .add {
                    width: 40rpx;
                    height: 40rpx;
                    background: #F1ECE7;
                    border-radius: 21.6rpx;
                    color: #979797;
                    @include textCenter;
                    font-size: 50rpx;
                }

                .cart-count {
                    width: 72rpx;
                    height: 40rpx;
                    line-height: 40rpx;
                    background: #F1ECE7;
                    border-radius: 21.6rpx;
                    margin-left: 18rpx;
                    margin-right: 18rpx;
                    text-align: center;
                }
            }
        }
    }

    // 底部导航
    .tabbar {
        width: 100%;
        height: 176rpx;
        background-color: #f3f3f3;
        position: fixed;
        bottom: 0rpx;
        display: flex;
        align-items: center;
        justify-content: space-around;
        border-radius: 8% 8%;

        .all {
            font-size: 32rpx;
            color: #3E3E3E;
            letter-spacing: 2.29rpx;
            display: flex;
        }

        .totalPrice {
            font-size: 32rpx;
            color: #3E3E3E;
            letter-spacing: 2.29rpx;
            color: red;
        }

        .submitOrder {
            width: 208rpx;
            height: 80rpx;
            background: #354E44;
            border-radius: 14rpx;
            border-radius: 14rpx;
            font-size: 36rpx;
            color: #FFFFFF;
            letter-spacing: 2.57rpx;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    }
	
</style>
